<template>
	<view>
		<view>
			<!-- 搜索 -->
			<view class="g-hd">
				<view class="m-sch">
					<input class="u-ipt" type="text" value="" placeholder="请输入商品名">
					<view class="u-btn">搜索</view>
				</view>
			</view>
			<view class="g-main">
				<!-- 轮播图 -->
				<view class="m-banner">
					<swiper class="u-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="1000">
						<swiper-item v-for="(item, index) in bannerList" :key="index">
							<image class="u-swiper-image" :lazy-load="true" :src="item.href" mode="scaleToFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="m-ct">
					<!-- 筛选 -->
					<view :class="searchBarFixed == true ? 'm-filtrate-fixed' :'m-filtrate'" id="m-filtrate">
						<view class="m-tab">
							<view class="u-tab-itm">
								<text class="u-tab-text">综合</text>
								<image class="u-tab-img" src="../../../static/icon/arrow-top.png" mode=""></image>
							</view>
							<view class="u-tab-itm">
								<text class="u-tab-text">销量</text>
								<image class="u-tab-img" src="../../../static/icon/arrow-top.png" mode=""></image>
							</view>
							<view class="u-tab-itm">
								<text class="u-tab-text">价格</text>
								<image class="u-tab-img" src="../../../static/icon/arrow-top.png" mode=""></image>
							</view>
							<view class="u-tab-itm">
								<text class="u-tab-text">重置</text>
								<image class="u-tab-img" src="../../../static/icon/arrow-top.png" mode=""></image>
							</view>
						</view>
					</view>
					<!-- 商品列表 -->
					<view class="m-good">
						<scroll-view scroll-y="true" class="m-list">
							<view class="u-list-itm" v-for="(item, index) in goodsList" :key="index">
								<image class="u-good-img" :src="item.img" mode="scaleToFill"></image>
								<view class="u-good-info">
									<view>
										<view class="u-good-title f-ptb">{{item.name}}</view>
										<view class="u-good-intro f-ptb">{{item.intro}}</view>
									</view>
									<view>
										<view class="u-good-price f-ptb">
											￥<text class="u-good-price-num">{{item.vip_price}}</text>
											<text class="u-good-menber">{{item.price}}</text>
										</view>
										<view class="u-good-sales f-ptb">
											<view class="u-good-num">销量：{{item.sales}}</view>
											<view class="u-good-num">库存：{{item.repertory}}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view v-show="showMore">
							暂无更多数据
						</view>
					</view>
				</view>
			</view>
		</view>



		<!-- 底部 -->
		<view class="nav-box">
			<view class="nav">
				<view class="nav-item">
					<image src="../../../static/icon/gong.png" mode=""></image>
					<view>首页</view>
				</view>
				<view class="nav-item">
					<image src="../../../static/icon/gong.png" mode=""></image>
					<view>我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HOME from '@/api/home/index.js'

	export default {
		data() {
			return {
				active: 2,
				current: 1,
				bannerList: null,
				animationData: {},
				goodsList: [],
				name: '',
				merchant_id: '',
				order: 'sort',
				type: 'asc',
				showMore: false,

				distanceTop: '', //当距离大于180时吸顶
				searchBarFixed: false // 吸顶
			}
		},
		mounted() {
			this.getBanner();
			this.getGoodsList();
			const query = uni.createSelectorQuery().in(this);
			query.select('.m-banner').boundingClientRect(res => {
				this.distanceTop = res.height;
			}).exec();
		},

		onPageScroll(e) {
			if (e.scrollTop >= this.distanceTop) { //当距离大于distanceTop时吸顶
				this.searchBarFixed = true;
			} else {
				this.searchBarFixed = false;
			}
		},
		methods: {
			getGoodsList() {
				var self = this;
				uni.showLoading({
					title: '获取数据中',
					mask: true
				})
				HOME.goodsList(1, 10, self.name, self.merchant_id, self.order, self.type).then(res => {
					uni.hideLoading();
					console.log(res.data.data)
					if (res.data.data.length == 0) {
						self.showMore = true;
					}
					self.goodsList = self.goodsList.concat(res.data.data);
				})
			},
			// 获取轮播图
			getBanner() {
				HOME.banner(1, 10).then(res => {
					this.bannerList = res.data.data;
				})
			},


		}
	}
</script>

<style scoped lang="scss">
	$pbgc: #f0f0f0;
	$mbgc: #fff;
	$ubgc: #2A9F93;
	$f28: 28rpx;
	$f32: 32rpx;
	$f24: 24rpx;

	page {
		background-color: #F0F0F0;
	}

	.g-hd {
		position: fixed;
		box-sizing: border-box;
		z-index: 99;
		width: 750rpx;
		padding: 15rpx;
		background-color: $mbgc;

		.m-sch {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 58rpx;
			padding: 0 5rpx;
			border: 2rpx #2A9F93 solid;
			border-radius: 30rpx;

			.u-ipt {
				padding-left: 10rpx;
				font-size: $f28;
			}

			.u-btn {
				padding: 10rpx 20rpx;
				border: 1rpx #2A9F93 solid;
				border-radius: 30rpx;
				font-size: 24rpx;
				color: $mbgc;
				background-color: #2A9F93;
			}
		}
	}

	.g-main {
		padding-top: 90rpx;

		.m-banner {
			box-sizing: border-box;
			width: 750rpx;

			.u-swiper {
				box-sizing: border-box;
				max-width: 750rpx;
			}

			.u-swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.m-ct {
			background-color: $ubgc;

			.m-filtrate {
				max-width: 750rpx;
				height: 88rpx;
				background-color: $ubgc;

				.m-tab {
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 88rpx;
					font-size: $f32;

					.u-tab-itm {
						display: flex;
						align-items: center;
						color: #fff;

						.u-tab-img {
							width: 44rpx;
							height: 44rpx;
						}
					}
				}
			}

			// 吸顶
			.m-filtrate-fixed {
				width: 750rpx;
				height: 88rpx;
				position: fixed;
				background-color: #2A9F93;
				top: 90rpx;
				z-index: 999;

				.m-tab {
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 88rpx;
					font-size: $f32;

					.u-tab-itm {
						display: flex;
						align-items: center;
						color: #fff;

						.u-tab-img {
							width: 44rpx;
							height: 44rpx;
						}
					}
				}
			}

			.m-good {
				border-radius: 28rpx 28rpx 0 0;
				background-color: $mbgc;

				.m-list {
					box-sizing: border-box;
					padding: 20rpx;

					.u-list-itm {
						display: flex;
						margin: 20rpx 0;

						.u-good-img {
							width: 300rpx;
							height: 300rpx;
							margin-right: 30rpx;
							border-radius: 10rpx;
						}

						.u-good-info {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: 380rpx;

							.u-good-title {
								line-height: 48rpx;
								overflow: hidden;
								-webkit-line-clamp: 2;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								font-size: $f32;
								font-weight: 800;
							}

							.u-good-intro {
								line-height: 36rpx;
								font-size: $f24;
								color: #656565;
							}

							.u-good-price {
								color: #e4393c;

								.u-good-price-num {
									font-size: 44rpx;
								}

								.u-good-menber {
									margin-left: 4rpx;
									text-decoration: line-through;
									color: #999;
								}
							}

							.u-good-sales {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								color: #999;
								
								.u-good-num {
									margin-right: 10rpx;
								}
							}
						}

					}
				}
			}
		}
	}



	.nav-box {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 98rpx;
		background-color: $mbgc;
		font-size: 30rpx;

		display: flex;

		.nav {
			display: flex;
			justify-content: space-around;
			align-items: center;

			width: 750rpx;

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-bottom: 10rpx;
				}
			}

		}
	}
</style>
